<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>随手记·云版</title>
<style>
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;padding:1rem;background:#f5f5f5;color:#333}
h1{margin:0 0 1rem;font-size:1.5rem}
#in{display:flex;gap:.5rem}
#in input{flex:1;padding:.6rem;font-size:1rem;border:1px solid #bbb;border-radius:4px}
button{padding:.6rem 1rem;font-size:1rem;border:none;border-radius:4px;background:#07c160;color:#fff;cursor:pointer}
button.del{background:#e54847}
ul{list-style:none;padding:0;margin:1rem 0}
li{display:flex;justify-content:space-between;align-items:center;padding:.6rem .4rem;border-bottom:1px solid #ddd;background:#fff}
li span{flex:1;margin-right:.5rem;word-break:break-all}
time{font-size:.75rem;color:#999;margin-right:.5rem}
@media(min-width:600px){body{max-width:600px;margin:2rem auto}}
</style>
</head>
<body>
<h1>随手记·云版</h1>
<div id="in">
  <input id="txt" placeholder="写点什么…" />
  <button onclick="add()">保存</button>
</div>
<ul id="lst"></ul>

<script>
const API_SAVE = 'http://124.221.192.67:8082/save';
const API_LIST = 'http://124.221.192.67:8082/list';

async function add(){
  const v = document.getElementById('txt').value.trim();
  if(!v)return;
  await fetch(API_SAVE,{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({text:v})
  });
  document.getElementById('txt').value='';
  load();
}
async function load(){
  const res = await fetch(API_LIST);
  const notes = await res.json();
  const lst = document.getElementById('lst');
  lst.innerHTML = notes.map(n=>`
    <li>
      <span>${n.text}</span>
      <time>${n.time}</time>
    </li>`).join('');
}
document.getElementById('txt').addEventListener('keyup', e=>{if(e.key==='Enter') add();});
load();
</script>
</body>
</html>